import React from 'react'
import DefaultAvatar from "../../../res/images/web/shared/touxiang@2x.png";
import LvMark from "../../../shared-components/LvMark/LvMark";
import CommentIcon from "../../../res/images/web/topic/talk@2x.png";
import DeleteIcon from "../../../res/images/web/topic/delete@2x.png"
import FGIcon from "../../../res/images/web/topic/guanfang@2x.png"
import LocalStorageService from "../../../utils/LocalStorageService";
import VipIcon from "../../../res/images/web/my/vip kim@2x.png";
import {addHitCount} from "../../../apis/goApis";

const TopicItem = props => {

    const storage = LocalStorageService
    const topic = props.topic
    const history = props.history
    const canDelete = props.canDelete
    // const uid = storage.get('userid')
    const tUid = topic.Uid
    const isFG = tUid === 'fangguan'
    const login = storage.get('isLogin')
    const isDing = topic.Ding > 0
    const isJH = topic.Jing > 0
    const isVip = topic.Vip > 0

    let imgList = null
    const goToTopic = (topic) => {
        addHitCount('topic', {id: topic.Id, title: topic.Title,})
        props.history.push(`./topic/${topic.Id}`)
    }
    if (topic.Img !== '') {
        const imgs = JSON.parse(topic.Img)
        imgList = <div
            className='topic-img-ctn'
            onClick={() => goToTopic(topic)}
        >
            {imgs.map(img => {
                return <div
                    key={img}
                    style={{
                        width: 68,
                        height: 68,
                        borderRadius: '4px',
                        background: `no-repeat center/cover url(${img})`
                    }}
                />
            })}
        </div>
    }

    const commentNum = <div className='flex-center-align-center'>
        <img alt='' src={CommentIcon} style={{width: 16, height: 16, marginRight: 3,}}/>
        <span>{topic.Comment}</span>
    </div>

    const deleteIcon = <img
        alt=''
        src={DeleteIcon}
        style={{
            position: 'absolute',
            top: '16px',
            right: '16px',
            width: '24px',
            height: '24px',
            zIndex: 2,
        }}
        onClick={props.onDelete}
    />

    const FGMark = <div className='fg-icon'>
        <img
            alt=''
            src={FGIcon}
            style={{width: '43px', height: '20px',}}
        />
        <span>官方</span>
    </div>

    const DingIcon = <div className='topic-item-sp-mark'><span>顶</span></div>
    const JingIcon = <div className='topic-item-sp-mark'><span>精</span></div>
    const vipIcon = <img alt='' src={VipIcon} style={{width: '37px', marginRight: '4px',}}/>

    return <div
        key={topic.Id}
        className='topic-item-ctn'
    >

        <div
            className='flex-space-between-align-center topic-item-head'
        >
            <div className='flex-center-align-center'>
                <img
                    alt=''
                    src={topic.Avatar ? topic.Avatar : DefaultAvatar}
                    style={{
                        width: '32px',
                        height: '32px',
                        borderRadius: '16px',
                        marginRight: '8px',
                        // background: 'black',
                    }}
                />
                <span
                    style={{
                        marginRight: 3,
                        color: isVip ? '#FA7268' : '#333',
                    }}
                >
                    {topic.Username}
                </span>
                {isVip ? vipIcon : null}
                {isFG ? FGMark : <LvMark lv={topic.Lv}/>}
                {isDing ? DingIcon : null}
                {isJH ? JingIcon : null}
            </div>

            {canDelete ? null : commentNum}
            {login && canDelete ? deleteIcon : null}

        </div>

        <div
            // onClick={() => history.push(`./topic/${topic.Id}`)}
            onClick={() => goToTopic(topic)}
        >
            <p className='topic-item-title'>{topic.Title}</p>
            <p className='topic-item-content'>{topic.Txt}</p>
        </div>

        {imgList}

    </div>

}

export default TopicItem
